{% extends "base.html" %}

{% block title%}
<li id="tab">
	<a href="/osimtest/home">Control Panel</a>
</li>
<li id="tab_current">
	<a href="/osimtest/report">Test Results</a>
</li>
{% endblock %}

{% block content %}
<div id="report_panel">
	<div style="height: 20px"></div>			
	<div id="report_table">
		<div id="mask" style="width: 900px; height: 3px; background-color: white;" class="al"></div>
		<div id="table_head" class="al">
			<table>
				<thead id="head">
					<tr>
						<th class="timestamp" style="width: 76px;">Time Stamp</th>
						<th class="caseid" style="width: 48px;">Case Id</th>
						<th class="stepname" style="width: 66px;">Step</th>
						<th class="stepdescription" style="width: 166px;">Step Description</th>
						<th class="expectedresult" style="width: 148px;">Expect Result</th>
						<th class="stepresult" style="width: 38px;">Result</th>
						<th class="testlog" style="width: 148px;">Log</th>
						<th class="screenshot" style="width: 74px;">Screen shot</th>
					</tr>
				</thead>
			</table>
		</div>
		<div id="tables">
			<table id="result_table" summary="Display test results">
				<tbody>
						{% for meta in report_data %}
						<tr>
							<td class="timestamp cell" style="width: 10%;">{{meta.timestamp}}</td>
							<td class="caseid cell" style="width: 7%;">{{meta.caseid}}</td>
							<td class="stepname cell" style="width: 9%;">{{meta.stepname}}</td>
							<td class="stepdescription cell" style="width: 20%">
								<div class="wrap_block">{{meta.stepdescription}}</div>
							</td>
							<td class="expectedresult cell" style="width: 18%;">
								<div class="wrap_block">{{meta.expectedresult}}</div>
							</td>
							<td class="stepresult cell" style="width: 6%;">{{meta.stepresult}}</td>
							<td class="testlog cell" style="width: 18%;">{{meta.testlog}}</td>
							<td class="screenshot cell" style="width: 10%;">
								<div style="display: none;">{{meta.screenshot}}</div>
								<div>{{pic_name}}</div>
							</td>
						</tr>
						{% endfor %}
				</tbody>
			</table>
		</div>
	</div>
</div>
{% endblock %}